<template>
  <div class="guards">
    <Headline :headline1="$t('m.EquipmentCenter')+'  /  '" :headline2="$t('m.AccessControlAndAccessGate')"></Headline>
    <a-card style="width: 100%">
      <div class="search">
        <div class="search-a ov_flex">
          <a-input-search
            class="input-a"
            :placeholder="$t('m.PleaseEnterYourSearchTerms')"
            size="default"
            v-model="guardfrom.key"
            @search="guardSearch"
          />
        </div>
        <a-tree-select
          v-model="value"
          show-search
          style="width: 30%; height: 32px; margin-left: 15px"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="Please select"
          allow-clear
          @change="guardchecked"
          tree-default-expand-all
        >

          <a-tree-select-node
            v-for="item in contTree"
            :key="item.id"
            :cont="item"
            :value="item.areaname"
            :title="item.areaname"
          >
            <a-tree-select-node
              v-for="int in item.children"
              :key="int.id"
              :cont="int"
              :value="int.areaname"
              :title="int.areaname"
            >
              <a-tree-select-node
                v-for="ins in int.children"
                :key="ins.id"
                :cont="ins"
                :value="ins.areaname"
                :title="ins.areaname"
              />
            </a-tree-select-node>
          </a-tree-select-node>
        </a-tree-select>

        <div class="chend">
          <a-checkbox :defaultChecked="guardfrom.vChild" @change="guardChange">
            {{$t('m.WhetherToDisplayChildNodes')}}
          </a-checkbox>
        </div>
      </div>
        <div class="conter-table">
        <div id="components-table-demo-size">
          <a-table
           :rowKey="(r,i) => i.toString()"
            :columns="columns"
            :data-source="datas"
            bordered
            :pagination="false"

          >
          </a-table>
          <a-pagination
            class="pages"
            show-size-changer
            :defaultPageSize="5"
            :default-current="1"
            :total="total"
            @change="guardPages"
            :pageSizeOptions="['5', '10', '30', '40']"
            @showSizeChange="onShowguardChange"
          />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import Modal from "@/components/common/Modal";
import Delete from "@/components/Delete";
import { getDoorList, getDevAreaTree } from "@/api/perUnit";
import {Setperms} from '@/assets/js/setperms'
export default {
  nema: "Unitguards",
  components: {
    Headline,
  },
  data() {
    return {
      contTree: [], //树形结构
      value: "", //选中值
      guardfrom: {
        areaCode: "", //区域编号
        key: "",
        vChild: true,
        page: 1,
        start: 0,
        limit: 10,
      },
       columns: [
        {
          title: this.$t('m.Name'),
          dataIndex: "name",
        },
        {
          title: this.$t('m.Controller'),
          dataIndex: "devname",
        },
        {
          title: this.$t('m.ReadHead'),
          dataIndex: "inouttype",
        },
        {
          title: this.$t('m.Relay'),
          dataIndex: "readhead",
        },
        {
          title: this.$t('m.EquipmentNumber'),
          dataIndex: "machineid",
        },
        {
          title: this.$t('m.Location'),
          dataIndex: "areaname",
        },
      ],
      datas:[],
      total:0,
    };
  },
  created() {
    // this._getDoorList()
    this._getDevAreaTree();
    this.parms = Setperms(this.$route.fullPath,JSON.parse(sessionStorage.getItem('menu')))
    console.log(this.parms)

  },
  methods: {
    isTrue(str){
      return this.parms.indexOf(str) !== -1;
    },
    //请求树形节点数据
    _getDevAreaTree() {
      getDevAreaTree().then((res) => {
        this.contTree = res.data;
        this._chexd();
      });
    },
    //选中节点触发
    guardchecked(value, label, extra) {
      console.log(extra.triggerNode);
      //判断是否选中值了
      if (extra.triggerNode) {
        //获取当前选中的对象信息
        const cont = extra.triggerNode.$attrs.cont;
         this.guardfrom.areaCode = cont.areacode
      }
      this._getDoorList();
    },
    _getDoorList() {
      getDoorList({params:this.guardfrom}).then((res) => {
        const data = res.data.data
        console.log(data)
        for(let item in data){
         if(data[item].inouttype==0){
            data[item].inouttype = "0号"
         } else if(data[item].inouttype==1){
           data[item].inouttype = "1号"
         }else if(data[item].inouttype==2){
            data[item].inouttype = "2号"
         }else{
           data[item].inouttype = "3号"
         }
           if(data[item].readhead==0){
            data[item].readhead = "1号继电器"
         } else if(data[item].readhead==1){
           data[item].readhead = "2号继电器"
         }else if(data[item].readhead==2){
            data[item].readhead = "3号继电器"
         }else{
           data[item].readhead = "4号继电器"
         }
        }
        this.total = res.data.total;
        this.datas = data;
      });
    },
  //默认选中第一条
   _chexd() {
      //获取第一条数据
      let item = this.contTree[0];
      console.log(item);
      this.value = item.areaname;
     this.guardfrom.areaCode = item.areacode
       this._getDoorList();
    },
    //是否选中子节点
    guardChange() {
      this.guardfrom.vChild = !this.guardfrom.vChild
       this._getDoorList();
    },
    //搜索
    guardSearch() {
      this._getDoorList();
    },
    //分页
    guardPages(page, limit){
       this.guardfrom.page = page;
      this.guardfrom.limit = limit;
      this.guardfrom.start = (page - 1) * limit;
       this._getDoorList();

    },
    onShowguardChange(page, pageSize){
       this.guardfrom.page = page;
      this.guardfrom.limit = pageSize;
      this.guardfrom.start = (page - 1) * pageSize;
       this._getDoorList();
  },
  }
};
</script>
<style scoped lang="scss">
.search {
  display: flex;
  height: 35px;
  align-items: center;
}
.search-a {
  width: 300px;
  height: 35px;
}
.ov_flex {
  display: flex;
  align-items: center;
}
.conter-table {
  margin-top: 30px;
}
.chend{
  margin-left: 15px;
}
</style>
